<template>

  <div>
    <el-form :inline="true" :model="appUserExt" class="demo-form-inline"
             style="display: flex; flex-direction: column; width: auto; height:600px; overflow-x: auto;flex-wrap: wrap;">
      <el-form-item label="用户年龄">
        <el-input v-model="appUserExt.age" placeholder="用户年龄" disabled></el-input>
      </el-form-item>

      <el-form-item label="通话时长">
        <el-input v-model="appUserExt.callDurationSum" placeholder="通话总时长" disabled></el-input>
      </el-form-item>

      <el-form-item label="等级经验">
        <el-input v-model="appUserExt.levelExp" placeholder="等级经验值" disabled></el-input>
      </el-form-item>

      <el-form-item label="用户身高">
        <template v-if="!appUserExt.height">
          <el-input placeholder="未设置" disabled></el-input>
        </template>
        <template v-else>
          <el-input v-model="appUserExt.height" placeholder="用户身高" disabled></el-input>
        </template>

      </el-form-item>

      <el-form-item label="用户体重">


        <template v-if="!appUserExt.weight">
          <el-input placeholder="未设置" disabled></el-input>
        </template>
        <template v-else>
          <el-input v-model="appUserExt.weight" placeholder="用户体重" disabled></el-input>
        </template>


      </el-form-item>


      <el-form-item label="用户收入" prop="income">
        <el-select v-model="appUserExt.income" placeholder="用户收入" disabled style="width: 202px;">
          <el-option v-for="dict in dict.type.income" :key="dict.value" :label="dict.label"
                     :value="parseInt(dict.value)"/>
        </el-select>
      </el-form-item>

      <el-form-item label="用户体形" prop="physique">
        <el-select v-model="appUserExt.physique" placeholder="用户体形" disabled style="width: 202px;">
          <el-option v-for="dict in dict.type.physique" :key="dict.value" :label="dict.label"
                     :value="parseInt(dict.value)"/>
        </el-select>
      </el-form-item>

      <el-form-item label="用户生日">
        <template v-if="!appUserExt.birthDate">
          <el-input placeholder="未设置" disabled></el-input>
        </template>
        <template v-else>
          <el-input v-model="appUserExt.birthDate.split(' ')[0]" placeholder="用户生日" disabled></el-input>
        </template>
      </el-form-item>


      <el-form-item label="用户学历" prop="education">
        <el-select v-model="appUserExt.education" placeholder="用户学历" disabled style="width: 202px;">
          <el-option v-for="dict in dict.type.app_education" :key="dict.value" :label="dict.label"
                     :value="parseInt(dict.value)"/>
        </el-select>
      </el-form-item>

      <el-form-item label="用户职业" prop="profession">
        <el-select v-model="appUserExt.profession" placeholder="用户职业" disabled style="width: 202px;">
          <el-option v-for="dict in dict.type.app_profession" :key="dict.value" :label="dict.label"
                     :value="parseInt(dict.value)"/>
        </el-select>
      </el-form-item>

      <el-form-item label="用户星座" prop="constellation">
        <el-select v-model="appUserExt.constellation" placeholder="用户职业" disabled style="width: 202px;">
          <el-option v-for="dict in dict.type.app_constellation" :key="dict.value" :label="dict.label"
                     :value="parseInt(dict.value)"/>
        </el-select>
      </el-form-item>


      <el-form-item label="感情状态" prop="sentiment">
        <el-select v-model="appUserExt.sentiment" placeholder="用户职业" disabled style="width: 202px;">
          <el-option v-for="dict in dict.type.app_sentiment" :key="dict.value" :label="dict.label"
                     :value="parseInt(dict.value)"/>
        </el-select>
      </el-form-item>


      <el-form-item label="接受约会" prop="tryst">
        <el-select v-model="appUserExt.tryst" placeholder="用户职业" disabled style="width: 202px;">
          <el-option v-for="dict in dict.type.app_comfirm" :key="dict.value" :label="dict.label"
                     :value="parseInt(dict.value)"/>
        </el-select>
      </el-form-item>


      <el-form-item label="接受同居" prop="liveTogether">
        <el-select v-model="appUserExt.liveTogether" placeholder="用户职业" disabled style="width: 202px;">
          <el-option v-for="dict in dict.type.app_comfirm" :key="dict.value" :label="dict.label"
                     :value="parseInt(dict.value)"/>
        </el-select>
      </el-form-item>


      <el-form-item label="用户爱好">
        <el-select v-model="appUserExt.hobby" multiple placeholder="用户爱好" disabled style="width: 202px;">
          <el-option v-for="dict in dict.type.app_hobby" :key="dict.value" :label="dict.label"
                     :value="parseInt(dict.value)"/>
        </el-select>
      </el-form-item>

      <el-form-item label="居住省份">
        <el-input v-model="appUserExt.liveProvinceName" placeholder="居住省份" disabled></el-input>
      </el-form-item>


      <el-form-item label="居住城市">
        <el-input v-model="appUserExt.liveCityName" placeholder="居住城市" disabled></el-input>
      </el-form-item>

      <el-form-item label="用户头像">
        <ImagePreview :src="appUserExt.headUrl" width="100px" height="100px"></ImagePreview>
        <el-button size="mini" type="text" style="color: #ff4949" @click="deleteHeadUrls" icon="el-icon-delete-solid"/>
      </el-form-item>


      <el-form-item label="实名认证">
        <ImagePreview :src="appUserExt.cardAuthUrl" width="100px" height="100px"></ImagePreview>
      </el-form-item>

      <el-form-item label="真人认证">
        <div style="width: 100px; height: 100px;">
          <VideoPreview :src="appUserExt.videoAuthUrl">
          </VideoPreview>
        </div>
      </el-form-item>


      <el-form-item label="最近动态">
        <ImagePreview :src="appUserExt.momentsPics" width="100px" height="100px"></ImagePreview>
      </el-form-item>

      <el-form-item label="视频介绍">
        <div style="width: 113px; height: 100px; display: flex">
          <VideoPreview :src="appUserExt.videoIntro">
          </VideoPreview>
          <el-button size="mini" type="text" style="color: #ff4949; position:absolute;bottom: 0;right: 0" @click="deleteVideo" icon="el-icon-delete-solid"/>
        </div>
      </el-form-item>


      <el-form-item label="用户相册">
        <ImagePreview :src="appUserExt.albumPics" width="100px" height="100px"></ImagePreview>
      </el-form-item>


      <el-form-item label="语音介绍">
        <!-- 一个自动播放、初始静音、循环播放、有控制面板的音频播放器 -->
        <VoicePreview :src="appUserExt.voiceIntro"></VoicePreview>
      </el-form-item>


    </el-form>

  </div>

</template>

<script>
import {deleteHeadUrl, deleteVideoIntro,} from "@/api/service/appUser/appUserExt";
export default {
  dicts: ['app_check_status', 'sys_yes_no', 'app_appuser_status', 'sys_user_sex', 'app_online_status',
    'app_account_type', 'app_income',
    'app_physique', 'app_mood', 'app_comfirm', 'app_sentiment', 'app_constellation', 'app_profession',
    'app_education', 'app_hobby'
  ],
  props: {
    appUserExt: {},
    userId: {
      type: String,
      default: '-1'
    },
  },
  methods: {
    player(event) {
    },
    deleteHeadUrls(){
      this.$modal.confirm('确认要删除该用户的头像吗？').then(() => {
        deleteHeadUrl(this.userId).then(response => {
          this.appUserExt.headUrl = null;
        });
      }).then(() => {
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});

    },
    deleteVideo(){
      this.$modal.confirm('确认要删除该用户的视频吗？').then(() => {
        deleteVideoIntro(this.userId).then(response => {
          this.appUserExt.videoIntro = null;
        });
      }).then(() => {
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});

    }
  },

}
</script>

<style>
</style>
